<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:a="http://richfaces.org/a4j"
      xmlns:r="http://richfaces.org/rich"
      xmlns:m="http://www.caradvert.com/main">


    <ui:composition template="/content/templates/myMenuTemplate.xhtml">
        <ui:param name="selectedMenuSub1" value="adverts"/>
        <ui:define name="title">#{labels['EDIT_ADVERT']}</ui:define>
        <ui:define name="headContent">
            <script type="text/javascript" src="/resources/lightbox/lightbox.js"></script>
            <link rel="stylesheet" href="/resources/lightbox/lightbox.css" type="text/css"/>
        </ui:define>        
        <ui:decorate template="/content/templates/contentDecorator.xhtml">

            <h:panelGroup rendered="#{not empty sellAdvertBean.advert}">
                <div style="padding:0 20px 0 20px">
                    <c:set var="dependsOnBrand" value="modelLbl, model, customModel"/>
                    <c:set var="dependsOnCategory" value="brand, brandLbl, customBrand, customBrandCheckbox, #{dependsOnBrand}"/>
                    <c:set var="dependsOnType" value="ctegory, ctegoryLbl, #{dependsOnCategory}"/>

                    <fieldset class="newAdvert">
                        <legend>#{labels['WANT_TO_SELL']}</legend>

                        <h:form id="newAdvert">
                            <table class="lj fullWide">
                                <tr>
                                    <td class="oneQuarter">
                                        <label>#{labels['TRANSPORT_TYPE']}:</label>
                                    </td>
                                    <td>
                                        <h:selectOneMenu value="#{sellAdvertBean.advert.vehicle.typeCode}" styleClass="mediumd"
                                                         required="#{empty sellAdvertBean.advert.vehicle.typeCode}" requiredMessage="#{labels['FIELD']} '#{labels['TRANSPORT_TYPE']}' #{labels['REQUIRED']}">
                                            <f:selectItem/>
                                            <s:selectItems value="#{vehicleTypes}" var="type" itemValue="#{type.code}"
                                                           label="#{labels[type.name]}"/>
                                            <a:support event="onchange" action="#{sellAdvertBean.typeChanged}" reRender="#{dependsOnType}" ajaxSingle="true"/>
                                        </h:selectOneMenu>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="ctegoryLbl" value="#{labels['CATEGORY']}:"/>
                                    </td>
                                    <td>
                                        <h:selectOneMenu id="ctegory" value="#{sellAdvertBean.advert.vehicle.categoryCode}" styleClass="mediumd"
                                                         required="#{empty sellAdvertBean.advert.vehicle.categoryCode}" requiredMessage="#{labels['FIELD']} '#{labels['CATEGORY']}' #{labels['REQUIRED']}">
                                            <f:selectItem/>
                                            <s:selectItems value="#{vehicleCategories[sellAdvertBean.advert.vehicle.typeCode]}" var="category" itemValue="#{category.code}"
                                                           label="#{labels[category.name]}"/>
                                            <a:support event="onchange" action="#{sellAdvertBean.categoryChanged}" reRender="#{dependsOnCategory}" ajaxSingle="true"/>
                                        </h:selectOneMenu>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <h:outputLabel id="brandLbl" value="#{labels['BRAND']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode)}"/>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0" style="margin:0;">
                                            <tr>
                                                <td>
                                                    <h:selectOneMenu id="brand" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode)}"
                                                                     value="#{sellAdvertBean.advert.vehicle.brandId}" styleClass="mediumd" disabled="#{sellAdvertBean.customBrand}"
                                                                     required="#{empty sellAdvertBean.advert.vehicle.brandId and not sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['BRAND']}' #{labels['REQUIRED']}">
                                                        <f:selectItem/>
                                                        <s:selectItems value="#{vehicleBrands[sellAdvertBean.advert.vehicle.typeCode]}" var="brand" itemValue="#{brand.id}"
                                                                       label="#{brand.name}"/>
                                                        <a:support event="onchange" action="#{sellAdvertBean.brandNameChanged}" reRender="#{dependsOnBrand}" ajaxSingle="true"/>
                                                    </h:selectOneMenu>
                                                    <h:panelGroup id="customBrand" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode)}">
                                                        <h:inputText rendered="#{sellAdvertBean.customBrand}" value="#{sellAdvertBean.advert.vehicle.brandName}" styleClass="medium" maxlength="50"
                                                                     required="#{sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['BRAND']}' #{labels['REQUIRED']}"/>
                                                    </h:panelGroup>
                                                </td>
                                                <td>
                                                    <h:panelGroup id="customBrandCheckbox" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode)}">
                                                        <h:selectBooleanCheckbox value="#{sellAdvertBean.customBrand}">
                                                            <a:support event="onchange" action="#{sellAdvertBean.brandNameChanged}" reRender="brand, customBrand, #{dependsOnBrand}" ajaxSingle="true"/>
                                                        </h:selectBooleanCheckbox>#{labels['CUSTOM_BRAND']}
                                                    </h:panelGroup>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="modelLbl" value="#{labels['MODEL']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.brandId or sellAdvertBean.customBrand)}"/>
                                    </td>
                                    <td>
                                        <h:panelGroup id="model" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.brandId and !sellAdvertBean.customBrand)}">
                                            <h:selectOneMenu  value="#{sellAdvertBean.advert.vehicle.modelId}" styleClass="mediumd"
                                                    required="#{empty sellAdvertBean.advert.vehicle.modelId and not sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['MODEL']}' #{labels['REQUIRED']}">
                                                <f:selectItem/>
                                                <s:selectItems value="#{vehicleModels}" var="model" itemValue="#{model.id}"
                                                               label="#{model.name}"/>
                                            </h:selectOneMenu>
                                        </h:panelGroup>
                                        <h:inputText id="customModel" required="#{sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['MODEL']}' #{labels['REQUIRED']}"
                                                     style="#{m:displayStyle(sellAdvertBean.customBrand)}" maxlength="50"
                                                     value="#{sellAdvertBean.advert.vehicle.modelName}" styleClass="medium"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="releaseLbl" value="#{labels['RELEASE_YEAR']}:"/>
                                    </td>
                                    <td>
                                        <h:selectOneMenu id="release" value="#{sellAdvertBean.advert.vehicle.releaseYear}" styleClass="smalld"
                                                required="true" requiredMessage="#{labels['FIELD']} '#{labels['RELEASE_YEAR']}' #{labels['REQUIRED']}">
                                            <f:selectItem/>
                                            <s:selectItems value="#{years}" var="year" itemValue="#{year}" label="#{year}"/>
                                        </h:selectOneMenu>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="priceLbl" value="#{labels['PRICE']}:"/>
                                    </td>
                                    <td>
                                        <h:panelGroup id="pricePanel">
                                            <h:inputText id="price" value="#{sellAdvertBean.advert.price}" styleClass="medium" converter="currency" maxlength="12"
                                                    required="#{!sellAdvertBean.agreementPrice}" requiredMessage="#{labels['FIELD']} '#{labels['PRICE']}' #{labels['REQUIRED']}"
                                                    disabled="#{sellAdvertBean.agreementPrice}"/>
                                            <h:selectOneMenu id="currency" value="#{sellAdvertBean.advert.currencyCd}" styleClass="smalld"
                                                    disabled="#{sellAdvertBean.agreementPrice}">
                                                <s:selectItems value="#{currencies}" var="currency" itemValue="#{currency.code}" label="#{labels[currency.name]}"/>
                                            </h:selectOneMenu>
                                            <h:selectBooleanCheckbox value="#{sellAdvertBean.agreementPrice}" >
                                                <a:support event="onchange" reRender="price, currency" ajaxSingle="true"/>
                                            </h:selectBooleanCheckbox>#{labels['AGREEMENT']}
                                        </h:panelGroup>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="stateLbl" value="#{labels['STATE']}:"/>
                                    </td>
                                    <td>
                                        <h:selectOneMenu id="state" value="#{sellAdvertBean.advert.vehicle.stateCode}" styleClass="mediumd">
                                            <f:selectItem/>
                                            <s:selectItems value="#{vehicleStates}" var="state" itemValue="#{state.code}" label="#{labels[state.name]}"/>
                                        </h:selectOneMenu>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="mileageLbl" value="#{labels['MILEAGE']}:"/>
                                    </td>
                                    <td>
                                        <h:panelGroup id="mileage">
                                            <h:inputText value="#{sellAdvertBean.advert.vehicle.mileage}" converter="integer" maxlength="7"  styleClass="medium"/>
                                            #{labels['KM']}
                                        </h:panelGroup>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="regionLbl" value="#{labels['REGION']}:"/>
                                    </td>
                                    <td>
                                        <h:selectOneMenu id="region" value="#{sellAdvertBean.advert.regionCd}" styleClass="larged">
                                            <f:selectItem/>
                                            <s:selectItems value="#{regions}" var="region" itemValue="#{region.code}" label="#{labels[region.name]}"/>
                                        </h:selectOneMenu>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="descrLbl" value="#{labels['DESCRIPTION']}:"/>
                                    </td>
                                    <td>
                                        <h:inputTextarea id="description" value="#{sellAdvertBean.advert.description}" styleClass="text"
                                                validatorMessage="#{labels['FIELD']} '#{labels['DESCRIPTION']}' #{labels.get('SYMBOLS_COUNT_EXCEED', 1000)}">
                                            <f:validateLength maximum="1000"/>
                                        </h:inputTextarea>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:outputLabel id="contactLbl" value="#{labels['CONTACT_INFO']}:"/>
                                    </td>
                                    <td>
                                        <h:inputTextarea id="contact" value="#{sellAdvertBean.advert.contactInfo}" styleClass="text"
                                                validatorMessage="#{labels['FIELD']} '#{labels['CONTACT_INFO']}' #{labels.get('SYMBOLS_COUNT_EXCEED', 1000)}">
                                            <f:validateLength maximum="1000"/>
                                        </h:inputTextarea>
                                    </td>
                                </tr>
                                <h:panelGroup rendered="#{sellAdvertBean.advert.images.size() gt 0}">
                                    <tr>
                                        <td colspan="2">&#160;</td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" class="cj">
                                            <h:panelGrid columns="3" style="margin:0 auto 0 auto;">
                                                <c:forEach items="#{sellAdvertBean.advert.images}" var="image">
                                                    <h:panelGroup layout="block" styleClass="lj" style="width:#{config.imageConfig.previewWidth + 20}px;">
                                                        <h:selectBooleanCheckbox value="#{sellAdvertBean.imageControl[image.id]}"/>
                                                        #{labels['DELETE']}
                                                        <h:outputLink value="#{config.imageConfig.uploadedUri}/#{image.id}.jpg" rel="lightbox">
                                                            <h:graphicImage styleClass="thumbnail" url="#{config.imageConfig.uploadedUri}/#{image.id}_preview.jpg" title="#{labels['CLICK_TO_ENLARGE']}"/>
                                                        </h:outputLink>
                                                    </h:panelGroup>
                                                </c:forEach>
                                            </h:panelGrid>
                                        </td>
                                    </tr>
                                </h:panelGroup>
                                <tr>
                                    <td colspan="2">&#160;</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="rj">
                                        <h:panelGroup id="saveButton">
                                            <h:commandButton value="#{labels['READY']}" action="#{sellAdvertBean.updateAdvert}"/>&#160;
                                            <h:commandButton value="#{labels['CANCEL']}" action="CANCEL" immediate="true"/>
                                        </h:panelGroup>
                                    </td>
                                </tr>
                            </table>
                        </h:form>
                    </fieldset>
                </div>
            </h:panelGroup>

        </ui:decorate>
    </ui:composition>
</html>